<template>
  <div class="kdpj">
    <div class="gr_title">
      <div class="fan" @click="fanhui">
        <img src="../assets/images/fanhui.png" height="21px" alt="" />
      </div>
      快递单评价
      <div>
        <img @click="tzhome" src="../assets/images/首页按钮.png" alt="" height="20px" v-show='flag'/>
        <span @click="tijiao" v-show="!flag">提交</span>
      </div>
    </div>
    <div class="zongpj">
      <div class="titlea">总体评分</div>
      <div class="titleb">
        <span>{{ zong * 2 }}</span
        >分
      </div>
      <van-rate
        v-model="zong"
        :icon="tu1"
        :void-icon="tu2"
        color="#ffb600"
        size="45px"
        gutter="15px"
        :readonly="true"
      />
    </div>

    <div class="dangepf">
      <div class="dangepf_title">店铺评分</div>
      <div class="dangepf_neir">
        <div>
          <span>店铺评分</span
          ><van-rate
            v-model="shuju.shop"
            :size="25"
            color="#ffcf60"
            void-icon="star"
            void-color="#eee"
            :readonly="flag"
          />
        </div>
        <div>
          <span>物流速度</span
          ><van-rate
            v-model="shuju.logistics"
            :size="25"
            color="#ff8d5b"
            void-icon="star"
            void-color="#eee"
            :readonly="flag"
          />
        </div>

        <div>
          <span>快递评价</span
          ><van-rate
            v-model="shuju.express"
            :size="25"
            color="#ff5d5e"
            void-icon="star"
            void-color="#eee"
            :readonly="flag"
          />
        </div>
      </div>
    </div>
    <div class="xiangq">
      <van-field
        v-model="shuju.info"
        placeholder="此用户没有填写评价"
        :readonly="flag"
        minHeight="150px"
        autosize
        type="textarea"
      />
     <van-uploader v-model="shuju.imgs" multiple :max-count="5" :show-upload="!flag" preview-full-image/>
    </div>
  </div>
</template>

<script>
import { apistarpj,Apistar } from "../requset/api";
export default {
  data() {
    return {
      tu1: require("../assets/images/xiaolian.png"),
      tu2: require("../assets/images/shangxin.png"),
      shuju: {
        totalScore: 0,
        express: 0,
        logistics: 0,
        shop: 0,
        info: "",
        imgs: [],
        id: 0,
      },
      //是否禁用
      flag: true,
    };
  },
 // Math.round((shuju.express+shuju.logistics+shuju.shop)/3)
 computed:{
     zong:function(){
          return Math.round((this.shuju.express+this.shuju.logistics+this.shuju.shop)/3)
     }
 },
  methods: {
    fanhui() {
      this.$router.back();
    },
    tzhome() {
      this.$router.push("/PersonalCenter");
    },
    tijiao(){
      Apistar({
          shop:this.shuju.shop,
          logistics:this.shuju.logistics,
          express:this.shuju.express,
          totalScore:this.zong,
          orderCode:this.shuju.orderCode,
          id:this.shuju.id,
          info:this.shuju.info,
      }).then(res=>{
          // console.log(res);
          if(res.errCode==0){
              this.$router.push("/Logisticslist");
          }
      })
    }
  },
  created() {
    let id = this.$route.params.id;
    apistarpj(id).then((res) => {
                // console.log(res);
                if(res.errCode==0){
                this.shuju=res.data
                if(res.data.starTime==null){
                    this.flag=false
                }
                }
                });
  },
};
</script>
 
<style lang = "less" scoped>
.kdpj {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  .zongpj {
    border-bottom: 1px solid #ddd;
    background: #fff;
    padding: 0px 45px;
    text-align: center;
    padding-bottom: 12px;
    .titlea {
      color: #aaa;
      line-height: 40px;
    }
    .titleb {
      color: #ffb601;
      span {
        font-size: 40px;
      }
    }
  }
  .dangepf {
    margin-bottom: 10px;
    background: #fff;
    padding: 0 15px;
    div {
      line-height: 50px;
    }
    .dangepf_neir {
      padding-left: 20px;
    }
  }
  .xiangq {
    background: #fff;
    padding: 9px 15px 20px;
    overflow: hidden;
  }
  .gr_title {
    width: 100%;
    height: 43px;
    background-color: #003399;
    background-size: 80%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    line-height: 43px;
    padding-right: 16px;
    .fan {
      line-height: 43px;
      margin-left: 10px;
      img {
        float: left;
      }
    }
    div {
      img {
        margin-top: 10px;
      }
    }
    .active {
      opacity: 0;
    }
  }
}
/deep/.van-cell,.van-field{
    padding: 0;
    height: 150px;
}
</style>